<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/base.css" />
  <link rel="stylesheet" href="./css/denlu.css" />
</head>

<body>
  <header>
    <div class="head">
      <span class="left">
        < </span>
          <span class="right"> 会员登录 </span>
    </div>
  </header>
  <div class="box">
    <div class="title">
      <span>手机号登录</span>
    </div>
    <div class="sub-title">
      <span>未注册的手机号登录后将自动注册</span>
    </div>
    <div class="number">
      <input type="text" name="" id="mouil" placeholder="请输入手机号码" pattern="[0-9]*" />
    </div>
    <div class="form-item">
      <input type="text" name="" id="captchaCode" placeholder="请输入图形验证码" />
      <div class="item">
        <img src="" alt="" style="width: 100%;">
      </div>
    </div>
    <div class="name">
      <input type="text" name="" id="smsCode" placeholder="请输入短信验证码" />
      <span class="add">获取验证码</span>
    </div>
    <div class="del">
      <span>登录</span>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
  <script src="./js/commit.js"></script>
  <script>

    document.querySelector('.left').addEventListener('click', function () {
      history.go(-1)
    })

    let captchaKey
    axios.get('/captcha/image').then(res => {
      console.log(res.data.data)
      document.querySelector('.item img').src = res.data.data.base64
      captchaKey = res.data.data.key
    })
    document.querySelector('.add').addEventListener('click', async function () {
      const mobile = document.querySelector('#mouil').value
      const captchaCode = document.querySelector('#captchaCode').value
      if (!mobile) return alert('手机号不能为空')
      if (!captchaCode) return alert('图形验证码不能为空')
      let i = 60
      let timer = setInterval(function () {
        i--
        document.querySelector('.add').innerHTML = `重新发送(${i})秒`
        if (i <= 0) {
          clearInterval(timer)
          document.querySelector('.add').innerHTML = '获取验证码'
        }
      }, 1000)
      const res = await axios.post('/captcha/sendSmsCaptcha', {
        form: {
          captchaCode: captchaCode,
          captchaKey: captchaKey,
          mobile: mobile
        }
      })
      console.log(res)
      alert(res.data.message)
    })
    document.querySelector('.del').addEventListener('click', async function () {
      const mobile = document.querySelector('#mouil').value
      const smsCode = document.querySelector('#smsCode').value
      const res = await axios.post('/passport/login', {
        form: {
          isParty: false,
          mobile: mobile,
          smsCode: smsCode,
          partyData: {}
        }
      })
      console.log(res)
      alert(res.data.message)
      if (res.data.status === 200) {
        location.href = './我的.html'
        localStorage.setItem('token', res.data.data.token)
      }
    })
  </script>
</body>

</html>